<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>{$Think.lang.set_pwd_eidt}</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="INDEX/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="INDEX/css/main.css"/>
		<link rel="stylesheet" type="text/css" href="INDEX/css/change_pwd.css"/>
	</head>

	<body>
		<script src="INDEX/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script src="INDEX/js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>	
		<script>
			mui.init();
		</script>
		<header class="mui-bar mui-bar-nav">
			<a href="#offCanvasSide" class="right_top"></a>
			<!--<a class="mui-switch "></a>-->
			<div class="mui-switch mui-pull-right {if $think_var=='zh-cn'}mui-active{/if}" id="mySwitch">
  				<div class="mui-switch-handle"></div>
			</div>
			<h1 class="mui-title">{$Think.lang.project_title}</h1>
		</header>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
				<div id="header">{include file='header'/}</div>
			<div class="mui-inner-wrap">
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper mui-slide-in">
					<div class="mui-scroll">
						<div class="password_change">
							<div class="password_change_top">
								<div style="width: 86%;display: inline-block;"></div>
								<span class="close_back">{$Think.lang.set_close}</span>
							</div>
							<div class="password_change_content">
								<div class="password_question" id="password_que">
									<span>{$Think.lang.pwd_encrypted}:</span>
									<input type="text" placeholder="{$Think.lang.pwd_encrypted_input}" readonly="readonly" id="change_question"/>
									<span class="right_all"></span>
									<div class="password_chose_question hide_div">
										<ul>
												{foreach $encrypt as $k=>$v}
												{if condition = "$think_var eq 'zh-cn'"}
													<li class="encrypt" data="{$v['id']}">{$v['question']}</li>
												{else}
												<li class="encrypt" data="{$v['id']}">{$v['question_en']}</li>
												{/if}
												{/foreach}
										</ul>
									</div>
								</div>
								<div class="password_question_answer">
									<span>{$Think.lang.pwd_encrypted_answer}:</span>
									<input type="text" placeholder="{$Think.lang.pwd_encrypted_answer}" id="encrypted_answer"/>							
								</div>
								<div class="password_new">
									<span>{$Think.lang.pwd_new_pass}:</span>
									<input type="password" placeholder="{$Think.lang.pwd_new_pass_input}" id="newpass"/>
									<span class="hide_pwd" id="show_hide_pwd"></span>
								</div>
								<div class="password_new_confirm">
									<span>{$Think.lang.pwd_pass}:</span>
									<input type="password" class="mui-input-password" placeholder="{$Think.lang.pwd_pass_input}" id="pass"/>
									<span class="hide_pwd" id="hide_show_pwd"></span>
								</div>
							</div>
							<div class="password_change_submit">{$Think.lang.set_submit}</div>
						</div>
					</div>
				</div>
			</div>	
		</div>
		<script src="INDEX/js/switchover.js"></script>
		<script src="INDEX/js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
				var passwordeye = $('#show_hide_pwd');
				passwordeye.off('click').on('click',function(){
			       if(passwordeye.hasClass('hide_pwd')){
			           passwordeye.removeClass('hide_pwd').addClass('show_pwd');//密码可见
			           $(this).siblings("input").prop('type','text');
			       }else{
			           passwordeye.removeClass('show_pwd').addClass('hide_pwd');//密码不可见
			           $(this).siblings("input").prop('type','password');
			       };
			   });
				var passwordeye1 = $('#hide_show_pwd');
				passwordeye1.off('click').on('click',function(){
			       if(passwordeye1.hasClass('hide_pwd')){
			           passwordeye1.removeClass('hide_pwd').addClass('show_pwd');//密码可见
			           $(this).siblings("input").prop('type','text');
			       }else{
			           passwordeye1.removeClass('show_pwd').addClass('hide_pwd');//密码不可见
			           $(this).siblings("input").prop('type','password');
			       };
			   })		
			   /******************************/
	$("#password_que").toggle(function(){
		$(".password_chose_question").show();
	},function(){
		$(".password_chose_question").hide();
	})
	mui(".password_chose_question").on("tap",".encrypt",function(){
		console.log(1122)
		if(!$(this).hasClass("add_blue")){
			$(this).addClass("add_blue");
			$(this).siblings().removeClass("add_blue");					
			$(".password_chose_question").hide();

			if(parseInt($(this).html().slice(0,2))<10){							
				$("#change_question").val($(this).html())
			}else{
				$("#change_question").val($(this).html())
			}
						
		}
	})

		var password_change_submit = document.getElementsByClassName("password_change_submit")[0];
		password_change_submit.addEventListener("tap", function () {
		var question = $(".password_chose_question").find(".add_blue").attr("data");
		
		var encrypted_answer = $("#encrypted_answer").val();
		var newpass  = $("#newpass").val();
		var pass = $("#pass").val();
		if(question == "")
		{
			mui.toast("{$Think.lang.pwd_encrypted_input}");
			return false;
		}
		if(encrypted_answer == "")
		{
			mui.toast("{$Think.lang.pwd_encrypted_answer_input}");
			return false;
		}
		if(newpass == "")
		{
			mui.toast("{$Think.lang.pwd_new_pass_input}");
			return false;
		}
		if(pass == "")
		{
			mui.toast("{$Think.lang.pwd_pass_input}");
			return false;
		}
		if(newpass != pass)
		{
			mui.toast("{$Think.lang.pwd_pass_falses}");
			return false;
		}
		
		$.post("{:Url('Users/edit_pwd')}", {
                "question" : question,
                "encrypted_answer" : encrypted_answer,
				'newpass' : newpass,
				'pass' : pass
            }, function(data) {
                if (data['code'] > 0) {
                    //$(".sub_login").attr("disabled", "disabled");
					mui.toast(data["message"])
                  setTimeout(function(){
						window.location.reload();
					},1000)
                } else {
                    mui.toast(data["message"])
                }
            });

	})

	$(".close_back").click(function(){
		window.history.back(-1); 
	})


	</script>
	</body>

</html>